<html>
<head>
  <meta http-equiv="cache-control" content="max-age=0" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="expires" content="0" />
  <meta http-equiv="pragma" content="no-cache" />
  <style type="text/css">
    .highlight  {
      -webkit-box-shadow: 0px 0px 35px 5px rgba(85, 255, 13, 1); /* WebKit */
      -moz-box-shadow: 0px 0px 35px 5px rgba(85, 255, 13, 1); /* Firefox */
      box-shadow: 0px 0px 35px 5px rgba(85, 255, 13, 1); /* Standard */
      border-radius: 5px;
    }

    .bluebox {
      background-color: blue;
      color: white;
    }
  </style>
</head>
<body>
  <div id="diagram">
  </div>

  <script src="lib/require/require.js"></script>

  <script>
    require({
      baseUrl: "./",
      paths: {
        'jquery' : 'lib/jquery/jquery-1.7.2.min',
        'bpmn/Bpmn' : 'build/bpmn.min',
      },
      packages: [
        { name: "dojo", location: "lib/dojo/dojo" },
        { name: "dojox", location: "lib/dojo/dojox"},
        // provided by build/bpmn.min.js
        // { name: "bpmn", location: "src/bpmn" }
      ]
    });

    require(["bpmn/Bpmn", "dojo/domReady!"], function(Bpmn) {
      new Bpmn().renderUrl("test/resources/task_loop.bpmn", {
        diagramElement : "diagram",
        overlayHtml : '<div style="position: relative; top:100%"></div>'
      }).then(function (bpmn){
        bpmn.zoom(0.8);
        bpmn.annotation("sid-C7031B1A-7F7E-4846-B046-73C638547449").setHtml('<span class="bluebox"  style="position: relative; top:100%">New Text</span>').addClasses(["highlight"]);
        bpmn.annotation("sid-C7031B1A-7F7E-4846-B046-73C638547449").addDiv("<span>Test Div</span>", ["testDivClass"]);
      });
    });
  </script>
</body>
</html>
